<template>
    <view v-if="current_item_info" class="flex">
        <view class="margin-right-10" @tap="tapInfo" :class="[class_page, current_item_info.open_item !== false ? '' : 'grayscale']">
            <image class="radius-10" style="width: 190rpx; height:190rpx;" :src="current_item_info.logo | ossUrl(190)"></image>
        </view>
        <view class="text-gray text-sm width-100p margin-left-4">
            <view :style="item_content_width?('width:'+item_content_width):''" :class="[class_page, current_item_info.open_item !== false ? '' : 'grayscale']">
                <view @tap="tapInfo">
                    <view class="text-bold text-15 text-333 line-height-11em" :class="[is_cart||is_pay?'text-cut-1':(is_item_info?'':'text-cut-2')]">
                        {{current_item_info.item_name}}
                    </view>
                    <view v-if="!is_cart && !is_pay" class="line-height-12em margin-top-10" :class="[is_item_info?'':'text-cut-2']">
                        {{current_item_info.content}}
                    </view>
                    <view v-if="item_attr_info" class="margin-bottom-10 text-cut-3" :style="item_content_width?('width:'+item_content_width):''">
                        <view v-if="item_attr_info.attr_value_1" class="cu-tag bg-nddyny margin-top-10">{{item_attr_info.attr_value_1}}</view>
                        <view v-if="item_attr_info.attr_value_2" class="cu-tag bg-nddyny margin-top-10">{{item_attr_info.attr_value_2}}</view>
                        <view v-if="item_attr_info.attr_value_3" class="cu-tag bg-nddyny margin-top-10">{{item_attr_info.attr_value_3}}</view>
                    </view>
                    <view v-if="(current_item_info.limit_amount_daily > 0 || current_item_info.limit_amount_only > 0) && !is_pay"
                        class="margin-top-10" style="margin-left: 1px;">
                        <text class="text-red padding-lr-6" style="margin-left: -1px; border: 1px solid hsla(8,79%,62%,.3);">
                            <text v-if="current_item_info.limit_amount_daily > 0">
                                <text>每日限购 {{current_item_info.limit_amount_daily}}</text>
                            </text>
                        </text>
                        <text class="text-red padding-lr-6" style="margin-left: -1px; border: 1px solid hsla(8,79%,62%,.3);">
                            <text v-if="current_item_info.limit_amount_only > 0">
                                <text>永久限购</text>
                                <text>{{current_item_info.limit_amount_only}}</text>
                            </text>
                        </text>
                    </view>
                    <view v-if="!is_pay" class="flex justify-between margin-top-6">
                        <text>
                            售出 {{current_item_info.sell_times}} <text class="margin-lr-10">/</text>
                            <text class="margin-right-4">剩余</text>
                            {{current_item_info.amount}}
                        </text>
                    </view>
                    <view class="flex text-sm margin-top-2 margin-bottom-2 text-red" v-if="current_item_info.pack_price > 0">
                        <text>包装费</text>
                        <text>￥</text>
                        <text style="margin-left: -4rpx">{{current_item_info.pack_price | floor}}</text>
                    </view>
                    <view class="flex margin-top-2">
                        <text v-if="current_item_info.oprice>0" class="text-through text-red text-bold margin-right-10">
                            ￥
                            <text style="margin-left: -4rpx">{{current_item_info.oprice | floor}}</text>
                        </text>
                        <text class="margin-right-10 text-nddyny">
                            <text class="margin-right-4">送金券</text>
                            <text>{{current_item_info.bonus_gold_coupon_ratio}}%</text>
                        </text>
                        <text v-if="current_item_info.buy_amount_min>1 && !is_pay" class="text-gray">
                            {{current_item_info.buy_amount_min}} 份起
                        </text>
                    </view>
                </view>
                <view v-if="current_item_info.open_item !== false" class="flex justify-between margin-top-6">
                    <view @tap="tapInfo" style="word-break: break-all;" class="text-red text-bold">
                        <text>￥</text>
                        <text class="text-15">
                            {{current_item_info.price | floor}}
                        </text>
                    </view>
                    <view v-if="!is_not_action && !is_cart && !cart_item_info && !is_pay" style="width: 148rpx;" class="text-right">
                        <template v-if="!seller_user_id && itemAttrDialogShow">
                            <nButton v-if="current_item_info.attr_key_1" class="sm round" title="查看规格" :tap="()=>{itemAttrDialogShow(current_item_info)}"></nButton>
                        </template>
                        <nButton v-else-if="!is_cart && current_item_info.attr_key_1" class="sm round" title="选规格" :tap="()=>{itemAttrDialogShow(current_item_info)}"></nButton>
                        <view v-else class="flex align-center">
                            <view @tap="itemAttrCartUpdate('1', current_item_info)">
                                <image style="width: 44rpx; height: 44rpx;" src="../../../../static/image/common/roundsub.png"></image>
                            </view>
                            <input type="number" class="text-center text-15 text-333" style="width: 60rpx;" value="0"
                                @confirm="itemAmountInputBlur($event, '2', current_item_info)"></input>
                            <view @tap="itemAttrCartUpdate('0', current_item_info)">
                                <image style="width: 44rpx; height: 44rpx;" src="../../../../static/image/common/roundadd.png"></image>
                            </view>
                        </view>
                    </view>
                    <view v-else-if="!is_cart && cart_item_info && !is_pay">
                        <view class="flex align-center">
                            <view @tap="()=>{
                                current_item_info.attr_key_1 && cart_item_info.is_sub == false 
                                ? $store.commit('userToastNone', '请到购物车或属性选择页面进行减购')
                                : itemAttrCartUpdate('1', current_item_info, cart_item_info.item_attr_id)
                            }">
                                <image style="width: 44rpx; height: 44rpx;" src="../../../../static/image/common/roundsub.png"></image>
                            </view>
                            <input v-if="current_item_info.attr_key_1" type="number" class="text-center text-15 text-333"
                                :disabled="true" style="width: 60rpx;" :value="cart_item_info.amount*1 || 0" @tap="()=>{itemAttrDialogShow(current_item_info)}"></input>
                            <input v-else type="number" class="text-center text-15 text-333" style="width: 60rpx;"
                                :value="cart_item_info.amount*1 || 0" @confirm="itemAmountInputBlur($event, '2', current_item_info, cart_item_info.item_attr_id)"
                                @input="(e)=>{cart_item_info.amount = e.target.value*1}"></input>
                            <view @tap="() => {
                                current_item_info.attr_key_1 
                                ? itemAttrDialogShow(current_item_info)
                                : itemAttrCartUpdate('0', current_item_info, cart_item_info.item_attr_id)
                            }">
                                <image style="width: 44rpx; height: 44rpx;" src="../../../../static/image/common/roundadd.png"></image>
                            </view>
                        </view>
                    </view>
                    <view v-else-if="is_cart">
                        <view class="flex align-center">
                            <view @tap="itemAttrCartUpdate('1', current_item_info, item_attr_info.item_attr_id)">
                                <image style="width: 44rpx; height: 44rpx;" src="../../../../static/image/common/roundsub.png"></image>
                            </view>
                            <input type="number" class="text-center text-15 text-333" style="width: 60rpx;" :value="cart_item_attr_info.amount*1 || 0"
                                @confirm="itemAmountInputBlur($event, '2', current_item_info, item_attr_info.item_attr_id)"
                                @input="(e)=>{cart_item_attr_info.amount = e.target.value*1}"></input>
                            <view @tap="itemAttrCartUpdate('0', current_item_info, item_attr_info.item_attr_id)">
                                <image style="width: 44rpx; height: 44rpx;" src="../../../../static/image/common/roundadd.png"></image>
                            </view>
                        </view>
                    </view>
                    <view v-else-if="is_pay" class="text-15 text-999">
                        <text class="margin-right-2">x</text>{{cart_item_attr_info.amount}}
                    </view>
                </view>
                <view v-else>
                    <view class="cu-capsule margin-top-6">
                        <view class='cu-tag bg-nddyny'>
                            上架时间
                        </view>
                        <view class="cu-tag line-nddyny">
                            {{current_item_info.open_start_time | timeFormat('hh:mm')}} -
                            {{current_item_info.open_end_time | timeFormat('hh:mm')}}
                        </view>
                    </view>
                </view>
                <view v-if="is_not_action" class="margin-top-4">
                    <view class="cu-capsule">
                        <view class='cu-tag' :class="[current_item_info.is_appoint_attr?(current_item_info.amount>0?'bg-nddyny':'bg-red'):'bg-grey']">
                            库存
                        </view>
                        <view class="cu-tag" :class="[current_item_info.is_appoint_attr?(current_item_info.amount>0?'line-nddyny':'line-red'):'line-gray']">
                            {{current_item_info.is_appoint_attr ? (current_item_info.amount > 0 ? current_item_info.amount : '没库存了') : '请选择属性'}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: [
            'class_page', 'item_content_width', 'buy_mode',
            'seller_user_id',
            'is_not_action', 'is_item_info', 'is_pay', 'is_cart',
            'item_info', 'cart_item_info', 'item_attr_info', 'cart_item_attr_info',
            'itemInfoDialogShow', 'itemAttrDialogShow', 'itemAttrCartUpdate',
        ],
        data() {
            return {
                current_item_info: null
            };
        },
        created() {
            this.setCurrentItemInfo();
        },
        watch: {
            item_info() {
                this.setCurrentItemInfo();
            }
        },
        methods: {
            tapInfo() {
                if (!this.seller_user_id && this.current_item_info) {
                    this.$store.commit('userNavTo', '/seller/item/info?item_id=' + this.current_item_info.item_id);
                } else if (this.seller_user_id) {
                    this.itemInfoDialogShow(this.item_info);
                }
            },
            setCurrentItemInfo() {
                let item_info = this.item_info;
                if (this.$nddyny.object.empty(item_info)) {
                    this.current_item_info = [];
                    return;
                }
                if (this.item_attr_info) {
                    item_info = Object.assign({}, item_info, {
                        attr_value_1: this.item_attr_info.attr_value_1,
                        attr_value_2: this.item_attr_info.attr_value_2,
                        attr_value_3: this.item_attr_info.attr_value_3,
                        oprice: this.item_attr_info.oprice,
                        price: this.item_attr_info.price,
                        amount: this.item_attr_info.amount,
                        bonus_gold_coupon_ratio: this.item_attr_info.bonus_gold_coupon_ratio,
                        logo: this.item_attr_info.logo
                    });
                }
                if (this.buy_mode && this.$dict.seller_buy_mode_int2key[this.buy_mode]) {
                    item_info.pack_price = item_info[this.$dict.seller_buy_mode_int2key[this.buy_mode].substr(3) +
                        '_pack_price'];
                } else {
                    item_info.pack_price = 0;
                }
                this.current_item_info = item_info;
            },
            itemAmountInputBlur(e, crud_type, item_info, item_attr_id) {
                this.itemAttrCartUpdate(crud_type, item_info, item_attr_id, e.target.value * 1);
            }
        }
    }
</script>
